<template>
  <div class="video-back">
    <video
      ref="video"
      class="video-tag"
      :src="src"
      autoplay
      muted
      preload
    ></video>
    <div ref="c_box" class="click-box" v-if="currentStatus == 'loop'">
      <div
        :class="
          tag.type === 'padding'
            ? 'box_btn btn_anim'
            : tag.display_type === 'nonel'
            ? 'box_btn btn_anim curr'
            : 'box_btn btn_anim getfocus'
        "
        v-for="(tag, index) in currentPlayItem.tags"
        :style="getBtnPos(tag)"
        :key="index"
        @click="
          clickTag(
            tag,
            {
              img: currentPlayItem.tag_img,
              name: tag.name,
              current: currentPlayItem
            },
            index
          )
        "
      >
        <div class="box_btn_back">
          <template v-if="tag.type == 'jumpVideo'">
            <!-- 二级跳转按钮 -->
            <div
              v-if="tag.grade && tag.grade === 'one'"
              :class="resolving !== 1920 ? 'box-img ' : 'box-img1920 '"
              :style="{
                'background-image':
                  'url(' + currentPlayItem.tag_img[index] + ')'
              }"
            >
              {{ tag.name }}
            </div>
            <!-- 二级跳转按钮 -->
            <div
              :class="resolving !== 1920 ? 'box-img ' : 'box-img1920 '"
              :style="{
                'background-image': 'url(' + currentPlayItem.tag_img + ')'
              }"
              v-else
            >
              {{ tag.name }}
            </div>
            <img
              v-if="tag.explain_imgs"
              :id="
                tag.name === 'EI工业智能体@钢铁' ? 'steel_imgs' : 'explain_imgs'
              "
              :src="currentPlayItem.explain_imgs[index]"
            />
          </template>
          <template v-else>
            <!-- 三级弹窗按钮 -->
            <div
              :class="
                resolving !== 1920 && tag.type != 'padding'
                  ? 'box-img-three allow_click_color'
                  : resolving !== 1920 && tag.type == 'padding'
                  ? 'box-img-three'
                  : resolving === 1920 && tag.type !== 'padding'
                  ? 'box-img-three-1920 allow_click_color'
                  : 'box-img-three-1920'
              "
              :style="{
                'background-image': 'url(' + tag.img_bg + ')'
              }"
            >
              {{ tag.name }}
            </div>
          </template>
        </div>
      </div>
      <!-- 隐藏的跳转的div -->
      <div v-if="this.$store.state.selectContent.lenght !== 0">
        <div
          v-for="content in this.$store.state.selectContent"
          :key="content.name"
          :style="getBtnPos(content)"
          class="content"
          @click="contentFadeIn(content)"
        ></div>
      </div>
    </div>
    <SingleVideoPop
      :data="popData"
      :status="singleVideoStatus"
      @close-pop="singleVideoStatus = false"
    ></SingleVideoPop>
    <ImgVideoMixPop
      :data="popData"
      :status="imgVideoStatus"
      @close-pop="imgVideoStatus = false"
    ></ImgVideoMixPop>
    <FullPageImgPop
      :data="popData"
      :status="fullImgStatus"
      @close-pop="fullImgStatus = false"
    ></FullPageImgPop>
    <TabVideoPop
      :data="popData"
      :status="tabVideoStatus"
      @close-pop="tabVideoStatus = false"
    />
    <PagerPop
      :data="popData"
      :status="pagerPopStatus"
      @close-pop="pagerPopStatus = false"
    />
    <SpecialVideoPop
      :data="popData"
      :status="SpecialVideoPopStatus"
      @close-pop="SpecialVideoPopStatus = false"
    />
  </div>
</template>

<script>
import SingleVideoPop from "@com/SingleVideoPop.vue";
import ImgVideoMixPop from "@com/ImgVideoMixPop.vue";
import FullPageImgPop from "@com/FullPageImgPop.vue";
import TabVideoPop from "@com/TabVideoPop.vue";
import PagerPop from "@com/PagerPop.vue";
import SpecialVideoPop from "@com/SpecialVideoPop.vue";
export default {
  props: {
    videoData: Object
  },
  components: {
    SingleVideoPop,
    ImgVideoMixPop,
    FullPageImgPop,
    TabVideoPop,
    PagerPop,
    SpecialVideoPop
  },
  data() {
    return {
      src: "",
      map: new Map(),
      currentTagName: "",
      startTime: 0,
      endTime: 0,
      currentPlayItem: null,
      currentStatus: "",
      selectTag: null,
      showTabBox: false,
      screenStyle: {
        width: 0,
        height: 0
      },
      currentInVideoStack: [],
      toHome: false,
      isToHomeEnd: false,
      popData: {},
      singleVideoStatus: false,
      imgVideoStatus: false,
      fullImgStatus: false,
      tabVideoStatus: false,
      pagerPopStatus: false,
      SpecialVideoPopStatus: false,
      resolving: "",
      speciaIndexOne: 0,
      speciaIndexTwo: 0,
      speciaIndexThree: 0,
      commitIndex: 0,
      // 用来判断进入还是循环
      speciaStatus: null,
      speciaPlayItem: null
    };
  },
  created() {
    if (window.screen.width <= 1920 && window.screen.width > 1366) {
      this.resolving = 1920;
    } else if (window.screen.width > 1920) {
      this.resolving = 1920;
    }
  },
  methods: {
    clickVideo() {
      this.initTagName("home");
      this.getVideoTag().play();
      this.getVideoTag().removeAttribute("muted");
    },
    clickTag(tag, selectTag, index) {
      this.isToHomeEnd = false;
      this.toHome = false;
      this.selectTag = selectTag;
      switch (tag.type) {
        case "jumpVideo":
          if (tag.status && tag.status === "existence") {
            var List = {
              fadeIn: tag.fadeIn,
              loop: tag.loop
            };
            this.speacialSwitch(List, tag.name);
            this.speciaPlayItem = List;
          } else if (tag.status && tag.status === "special") {
            this.currentInVideoStack.push(tag.to);
            this.initTagName(tag.to);
            this.$emit("selected", {
              name: selectTag.name,
              img: selectTag.img,
              content: this.$store.state.selectContent
            });
            this.$store.commit("setSelectContent", []);
          } else {
            if (tag.grade && tag.grade === "one") {
              const objTag = {
                name: selectTag.name,
                img: selectTag.img[index]
              };
              this.$emit("selected", objTag);
            } else {
              this.$emit("selected", selectTag);
            }
            this.currentInVideoStack.push(tag.to);
            this.initTagName(tag.to);
            if (tag.content !== undefined) {
              this.$store.commit("setSelectContent", tag.content);
            }
          }
          break;
        case "openImgVideoMixPop":
          this.popData = tag.content;
          this.imgVideoStatus = true;
          break;
        case "openSingleVideoPop":
          this.hideBack();
          switch (tag.opentype) {
            case "openTabVideoPop":
              this.popData = tag.content;
              this.tabVideoStatus = true;
              this.$store.commit("setImgListStatus", false);
              break;
            case "openMixPop":
              this.popData = tag.content;
              this.imgVideoStatus = true;
              this.$store.commit("setImgListStatus", false);
              break;
            case "openPagerPop":
              this.popData = tag.content;
              this.pagerPopStatus = true;
              this.$store.commit("setImgListStatus", false);
              break;
            case "openSpecialVideoPop":
              this.popData = tag.content;
              this.SpecialVideoPopStatus = true;
              this.$store.commit("setImgListStatus", false);
              break;
          }
          break;
        case "fullImgPop":
          this.popData = tag.content;
          this.fullImgStatus = true;
          this.$store.commit("setGlobalBack", false);
          this.$store.commit("setGlobalHome", false);
          break;
      }
    },
    speacialSwitch(List, name) {
      if (name === "信息化基本完成") {
        switch (this.speciaIndexOne) {
          case 0:
            this.specialTagName(List, this.speciaIndexOne);
            this.speciaIndexOne = 2;
            break;
          case 2:
            this.specialTagName(List, this.speciaIndexOne);
            this.speciaIndexOne = 4;
            break;
          case 4:
            this.specialTagName(List, this.speciaIndexOne);
            this.speciaIndexOne = 6;
            break;
          case 6:
            this.specialTagName(List, this.speciaIndexOne);
            this.speciaIndexOne = 0;
            break;
        }
      } else if (name === "未实现信息化") {
        switch (this.speciaIndexTwo) {
          case 0:
            this.specialTagName(List, this.speciaIndexTwo);
            this.speciaIndexTwo = 2;
            break;
          case 2:
            this.specialTagName(List, this.speciaIndexTwo);
            this.speciaIndexTwo = 4;
            break;
          case 4:
            this.specialTagName(List, this.speciaIndexTwo);
            this.speciaIndexTwo = 6;
            break;
          case 6:
            this.$store.commit("setSpeciaStatus", "loop");
            this.startTime = this.speciaPlayItem.loop[this.speciaIndexTwo];
            this.endTime = this.speciaPlayItem.loop[this.speciaIndexTwo + 1];
            this.getVideoTag().currentTime = this.startTime;
            this.speciaIndexTwo = 0;
            break;
        }
      } else {
        switch (this.speciaIndexThree) {
          case 0:
            this.specialTagName(List, this.speciaIndexThree);
            this.speciaIndexThree = 2;
            break;
          case 2:
            this.specialTagName(List, this.speciaIndexThree);
            this.speciaIndexThree = 4;
            break;
          case 4:
            this.$store.commit("setSpeciaStatus", "loop");
            this.startTime = this.speciaPlayItem.loop[this.speciaIndexThree];
            this.endTime = this.speciaPlayItem.loop[this.speciaIndexThree + 1];
            this.getVideoTag().currentTime = this.startTime;
            this.speciaIndexThree = 6;
            break;
          case 6:
            this.specialTagName(List, this.speciaIndexThree);
            this.speciaIndexThree = 0;
            break;
        }
      }
    },
    specialTagName(List, index) {
      if (this.$store.state.speciaStatus === "fadeIn") {
        return;
      }
      this.$store.commit("setSpeciaStatus", "fadeIn");
      if (List.fadeIn) {
        this.startTime = List.fadeIn[index];
        this.endTime = List.fadeIn[index + 1];
        this.getVideoTag().currentTime = this.startTime;
        this.commitIndex = index;
        // this.$refs.video.removeAttribute("autoplay");
      }
    },
    getVideoTag() {
      return this.$refs.video;
    },
    initTagName(name) {
      this.currentPlayItem = this.map.get(name);

      this.fadeInTagName();
    },
    fadeInTagName() {
      if (this.currentStatus === "fadeIn") {
        return;
      }
      this.currentStatus = "fadeIn";
      let item = this.currentPlayItem;
      if (item.fadeIn) {
        this.startTime = item.fadeIn[0];
        this.endTime = item.fadeIn[1];
        this.getVideoTag().currentTime = this.startTime;
      } else if (item.loop) {
        this.loopTagName();
      }
    },
    loopCurrentOne() {
      if (this.currentInVideoStack.length > 0) {
        let name = this.currentInVideoStack[
          this.currentInVideoStack.length - 1
        ];
        this.currentPlayItem = this.map.get(name);
        this.loopTagName();
      } else {
        this.initTagName("home");
      }
    },
    loopBackTagName() {
      if (this.currentInVideoStack.length > 0) {
        let name = this.currentInVideoStack.pop();
        this.currentPlayItem = this.map.get(name);
        this.loopTagName();
      } else {
        this.initTagName("home");
      }
    },
    loopTagName() {
      if (this.currentTagName === "loop") {
        return;
      }
      let item = this.currentPlayItem;
      this.currentStatus = "loop";
      this.startTime = item.loop[0];
      this.endTime = item.loop[1];
      this.getVideoTag().currentTime = this.startTime;
    },
    restartLoopTagName() {
      this.getVideoTag().currentTime = this.startTime;
    },
    fadeOutTagName() {
      if (this.currentStatus === "fadeOut") {
        return;
      }
      this.currentStatus = "fadeOut";
      let item = this.currentPlayItem;
      if (item.fadeOut) {
        this.startTime = item.fadeOut[0];
        this.endTime = item.fadeOut[1];
        this.getVideoTag().currentTime = this.startTime;
      }
    },
    fadeNextOne() {
      this.showTabBox = false;
      if (this.currentInVideoStack.length > 0) {
        let name = this.currentInVideoStack.pop();
        this.currentPlayItem = this.map.get(name);

        this.loopTagName();
        this.fadeOutTagName();
        if (this.currentInVideoStack.length <= 0) {
          this.isToHomeEnd = true;
        } else {
          let lastName = this.currentInVideoStack[
            this.currentInVideoStack.length - 1
          ];
          let tagItem = this.map.get(lastName);
          this.selectTag = {
            img: tagItem.tag_img,
            name: tagItem.desc
          };
          this.$emit("selected", this.selectTag);
        }
      } else {
        this.loopTagName();
        this.fadeOutTagName();
        this.isToHomeEnd = true;
        this.$emit("selected", null);
      }
    },
    closeTag() {
      this.toHome = true;
      // 关闭视频弹出层
      this.imgVideoStatus = false;
      this.singleVideoStatus = false;
      //
      this.fadeNextOne();
      this.$emit("selected", null);
    },
    getBtnPos(item) {
      if (item.pos) {
        return {
          left: (item.pos[0] / 2500) * 100 + "%",
          top: (item.pos[1] / 1080) * 100 + "%"
        };
      } else if (item.rect) {
        return {
          left: (item.rect[0] / 2500) * 100 + "%",
          top: (item.rect[1] / 1080) * 100 + "%",
          width: (item.rect[2] / 1080) * 100 + "%",
          height: (item.rect[3] / 1080) * 100 + "%"
        };
      } else if (item.position) {
        return {
          left: (item.position.left / 2500) * 100 + "%",
          top: (item.position.top / 1080) * 100 + "%",
          width: (item.position.width / 1080) * 100 + "%",
          height: (item.position.height / 1080) * 100 + "%"
        };
      }
    },
    update() {
      let item = this.currentPlayItem;
      let video = this.getVideoTag();
      let c_box = this.$refs.c_box;
      c_box && (c_box.style.width = video.clientWidth);
      // 正常进入循环退出
      if (this.currentStatus == "fadeIn") {
        if (!item.fadeIn || video.currentTime >= this.endTime - 0.016) {
          video.currentTime = this.endTime;
          this.loopTagName();
        }
      }
      if (this.currentStatus == "loop") {
        if (video.currentTime >= this.endTime - 0.016) {
          video.currentTime = this.endTime;
          this.restartLoopTagName();
        }
      }
      if (this.currentStatus == "fadeOut") {
        if (!item.fadeOut || video.currentTime >= this.endTime - 0.016) {
          video.currentTime = this.endTime;
          if (this.toHome) {
            if (this.isToHomeEnd) {
              this.initTagName("home");
            } else {
              this.fadeNextOne();
            }
          } else {
            this.loopCurrentOne();
          }
          // this.initTagName("home");
        }
      }
      //特殊的
      if (this.$store.state.speciaStatus == "fadeIn") {
        if (video.currentTime >= this.endTime - 0.032) {
          video.currentTime = this.endTime;
          if (this.$store.state.speciaStatus === "loop") {
            return;
          }

          this.$store.commit("setSpeciaStatus", "loop");
          this.startTime = this.speciaPlayItem.loop[this.commitIndex];
          this.endTime = this.speciaPlayItem.loop[this.commitIndex + 1];
          this.getVideoTag().currentTime = this.startTime;
        }
      }
      if (this.$store.state.speciaStatus == "loop") {
        if (video.currentTime >= this.endTime - 0.024) {
          video.currentTime = this.endTime;
          this.restartLoopTagName();
        }
      }
    },
    //隐藏左上后退和右上回家按钮
    hideBack() {
      this.$store.commit("setHomeBack", false);
      this.$store.commit("setSelectTagImg", false);
    },
    // 点击隐藏div切换视频进度
    contentFadeIn(content) {
      // if (content.fadeIn) {
      this.currentInVideoStack.push(content.to);
      this.initTagName(content.to);
      this.$emit("selected", {
        name: content.name,
        img: content.img,
        content: this.$store.state.selectContent
      });
      this.$store.commit("setSelectContent", []);
      // } else if (content.loop) {
      //
      //   this.loopTagName();
      // }
      //
    }
  },
  mounted() {
    let update = () => {
      this.update();
      window.requestAnimationFrame(update);
    };
    window.resize = () => {
      this.screenStyle = {
        width: window.innerWidth + "px",
        height: window.innerHeight + "px"
      };
    };
    this.screenStyle = {
      width: window.innerWidth + "px",
      height: window.innerHeight + "px"
    };
    window.requestAnimationFrame(update);
    this.src = this.videoData.src;
    this.videoData.animation.forEach(item => {
      this.map.set(item.name, item);
    });

    this.$nextTick(() => {
      this.clickVideo();
      //   this.$refs.video.play();
    });
  }
};
</script>

<style lang="scss" scope>
.back_mask {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.7);
  .prop {
    .title {
      position: fixed;
      color: #b82528;
      font-size: 3.2vh;
      font-weight: bold;
      top: 9%;
      left: 7%;
    }
    .subhead {
      position: fixed;
      font-size: 3vh;
      color: #ffffff;
      font-weight: bold;
      top: 9%;
      left: 40%;
    }
    .video {
      position: fixed;
      top: 15.5%;
      left: 1.25%;
      width: 97.4%;
      height: 76.5%;
      object-fit: fill;
    }
    .close {
      width: 5vh;
      height: 5vh;
      background: url("https://res-static.hc-cdn.cn/cloudbu-site/china/zh-cn/关于华为云/exibihition/Hall/ui/close.png");
      background-size: 100% 100%;
      position: absolute;
      right: 0vh;
      top: 4vh;
    }
    .close:hover {
      transform: scale(1.1, 1.1);
    }
    position: absolute;
    width: 76vw;
    height: 93vh;
    background-color: white;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.select-tag {
  position: absolute;
  left: 2vw;
  top: 2vh;
  width: 24%;
  img {
    width: 100%;
  }
  .close {
    width: 2vw;
    height: 2vw;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .box_btn_name {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 12px;
    transform: translate(-50%, -70%);
  }
}
.screen-wh {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.video-back {
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  .click-box {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .box_btn {
      position: absolute;
      width: 15%;
      // img {
      //   width: 100%;
      //   height: 2.6vw;
      // }
      .box_btn_back {
        position: relative;
      }
      .box_btn_name {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 1.8vh;
        transform: translate(-60%, -70%);
      }
      .allow_click_color {
        color: #1374ba;
      }
    }
    .getfocus {
      opacity: 0.8;
    }
    .getfocus:hover {
      opacity: 1;
      cursor: pointer;
    }
  }
  .video-tag {
    height: 100%;
  }
}
</style>
<style lang="scss" scope>
// 新增的div样式
.content {
  position: absolute;
  cursor: pointer;
  // background-color: red;
}
.curr {
  cursor: pointer;
}
.box-img {
  position: absolute;
  line-height: 25px;
  text-indent: 50px;
  padding-right: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  // display: inline-block;
  background-size: 100% 100%;
  font-size: 16px;
  height: 25px;
}
.box-img1920 {
  position: absolute;
  line-height: 35px;
  text-indent: 40px;
  padding-right: 35px;
  padding-top: 1px;
  padding-bottom: 6px;
  // display: inline-block;
  background-size: 100% 100%;
  font-size: 16px;
  height: 35px;
}
.box-img-three {
  position: absolute;
  line-height: 25px;
  // text-indent: 44px;
  white-space: nowrap;
  padding-left: 50px;
  padding-right: 35px;
  padding-top: 5px;
  padding-bottom: 5px;
  display: inline-block;
  background-size: 100% 100%;
  font-size: 16px;
  height: 25px;
}
.box-img-three-1920 {
  position: absolute;
  line-height: 35px;
  white-space: nowrap;
  text-indent: 35px;
  padding-right: 30px;
  padding-top: 2px;
  padding-bottom: 2px;
  display: inline-block;
  background-size: 100% 100%;
  text-align: left;
  font-size: 15px;
  height: 35px;
}

#explain_imgs {
  position: relative;
  width: 340px;
  top: 40px;
  right: 90px;
}

#steel_imgs {
  position: relative;
  width: 500px;
  bottom: -90px;
  left: calc(50% - 129px);
}
.touch {
  position: absolute;
  bottom: 27px;
  left: 50%;
  transform: translate(-50%);
  background-image: url("https://res-static.hc-cdn.cn/cloudbu-site/china/zh-cn/关于华为云/exibihition/Hall/ui/new_img/touch.png");
  font-size: 24px;
  font-weight: 500;
  width: 229px;
  height: 68px;
  text-align: center;
  line-height: 68px;
}
</style>

Powered by Gitea 当前版本: 1.12.3 页面: 24ms 模板: 3ms JavaScript licenses API
官方网站 Go1.14.6
